<template>
	<view class="settingContainer">
		<!-- 头像区域开始 -->
		<view class="avatar">
			<u-avatar :src="avatarUrl" mode="square" size="248"></u-avatar>
		</view>
		<!-- 头像区域结束 -->
		<u-gap height="10" bg-color="#f7f7f7"></u-gap>
		<!-- 用户信息区域开始 -->
		<view class="userInfo">
			<u-field v-model="value" label="用户昵称" >
			</u-field>
			<u-field v-model="grade" label="所在年级" right-icon="arrow-right" :clearable="false">
			</u-field>
		</view>
		<u-gap height="10" bg-color="#f7f7f7"></u-gap>
		<!-- 用户信息区域结束 -->
		<view class="position-sticky savaBtn">
			<button type="default">保存</button>
		</view>
		<!-- 保存按钮区域开始 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: "../../../static/jzqImgs/avatar.png",
				value: "曹同学",
				grade:"高一"
			};
		}
	}
</script>

<style lang="scss" scoped>
	.settingContainer {
		.avatar {
			padding: 20rpx 0;
			margin: auto 252rpx;
		}
		.savaBtn{
			position: fixed;
			bottom: var(--window-bottom);
			padding: 20rpx;
			width: 100%;
			button{
				background-color: #2A6CAC;
				color: #FFFFFF;
				border-radius: 50rpx;
				height: 92rpx;
				line-height: 92rpx;
			}
		}
	}
	
</style>
